<template>
	<el-dialog
		v-if="m"
		:title="m.deptno == 0 ? '数据增加' : '数据修改'"
		:visible.sync="isShow"
		width="400px"
		top="25vh"
		:append-to-body="true"
		:destroy-on-close="true"
		:close-on-click-modal="false"
		custom-class="full-dialog"
		>
		<div class="vue-box">
			<div class="c-panel">
				<!-- 参数栏 -->
				<br>
				<el-form size="mini" :model="m" :ref="m" :rules="rules" label-width="100px">
					<el-form-item label="部门编号：" prop="deptno">
						<el-input v-model="m.deptno" :disabled="ist"></el-input>
					</el-form-item>
					<el-form-item label="部门名称：" prop="dname">
						<el-input v-model="m.dname"></el-input>
					</el-form-item>
					<el-form-item label="部门地址：" prop="loc">
						<el-input v-model="m.loc"></el-input>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button size="small" @click="isShow = false">取 消</el-button>
			<el-button size="small" type="primary" @click="ok()">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
	export default{
		data(){
			var checkdeptno = (r,v,c)=>{
				console.log(isNaN(v));
				if(v === ''){
					return c(new Error('用户名不能为空'));
				}
				if(isNaN(v)){
					return c(new Error('只能输入数字'));
				}
				this.$axios.put("/api/dept/get/"+v).then(function (res){
					if(res.data.deptno != null && res.data.dname != null && res.data.loc != null){
						return c(new Error("主键已存在，请更换!!!"));
					}
				});
			}
			return {
				isShow: false,
				m: null,
				ist:true,
				rules:{
					deptno:[
						{validator:checkdeptno,trigger: 'blur'}
					],
					dname:[
						{ required: true, message: '请输入部门名称', trigger: 'blur' },
						{ min: 4, max: 20, message: '长度在 4 到 20 个字符', trigger: 'blur' }
					],
					loc:[
						{ required: true, message: '请输入部门地址', trigger: 'blur' },
						{ min: 10, max: 20, message: '长度在 10 到 20 个字符', trigger: 'blur' }
					]
				}
			}
		},
		methods:{
			open:function (t){
				this.isShow = true;
				this.ist = t == 0 ? false:true;
				this.create_m(t);
			},
			create_m:function (t){
				//返回添加时有可能用到的数据,如果没有此位置可以为空
				if(t == 0){
					this.m = {
						deptno:'',
						dname:'',
						loc:''
					};
					return ;//判断 完成后直接结束方法，省略if else结构
				}
				var than = this;
				this.$axios.put("/api/dept/get/"+t).then(function(res){
					than.m = res.data;
				});
			},
			ok:function (){
				let than = this;
				this.$axios.post(this.$data.ist == false ? "/api/dept/save":"/api/dept/modify",this.$data.m).then(function (res){
					if(res.data === 1){
						than.sa.msg("操作成功!!!",{icon:1,time:500});
						than.isShow = false;
						than.$parent.init();
					}
				});
			}
		}
	}
</script>

<style scoped="scoped">
	.c-panel{margin: 0px; padding: 0px 20px;}
</style>
